<template>
<!-- 资料维护 -->
	<div id="SupplierData">
<!--   <button   @click="viewsupplier">查询</button>-->
	<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">

	  <el-form-item label="公司名称" style="width: 600px;">
	    <el-input v-model="formLabelAlign.companyName" ></el-input>
	  </el-form-item>
	  
	  <el-form-item label="代表人"  style="width: 600px;">
	    <el-input v-model="formLabelAlign.name" ></el-input>
	  </el-form-item>
	  
<!--	  <el-form-item label="公司地址" >-->
<!--	    <el-select v-model="formLabelAlign.address" multiple placeholder="请选择">-->
<!--	        <el-option-->
<!--	          v-for="item in options"-->
<!--	          :key="item.value"-->
<!--	          :label="item.label"-->
<!--	          :value="item.value">-->
<!--	        </el-option>-->
<!--	      </el-select>-->
<!--	    -->
<!--	      <el-select-->
<!--	        v-model="value2"-->
<!--	        multiple-->
<!--	        collapse-tags-->
<!--	        style="margin-left: 20px;"-->
<!--	        placeholder="请选择">-->
<!--	        <el-option-->
<!--	          v-for="item in options"-->
<!--	          :key="item.value"-->
<!--	          :label="item.label"-->
<!--	          :value="item.value">-->
<!--	        </el-option>-->
<!--	      </el-select>-->
<!--		  -->
<!--		    <el-select-->
<!--		      v-model="value3"-->
<!--		      multiple-->
<!--		      collapse-tags-->
<!--		      style="margin-left: 20px;"-->
<!--		      placeholder="请选择">-->
<!--		      <el-option-->
<!--		        v-for="item in options"-->
<!--		        :key="item.value"-->
<!--		        :label="item.label"-->
<!--		        :value="item.value">-->
<!--		      </el-option>-->
<!--		    </el-select>-->
<!--			-->
<!--			  <el-select-->
<!--			    v-model="value4"-->
<!--			    multiple-->
<!--			    collapse-tags-->
<!--			    style="margin-left: 20px;"-->
<!--			    placeholder="请选择">-->
<!--			    <el-option-->
<!--			      v-for="item in options"-->
<!--			      :key="item.value"-->
<!--			      :label="item.label"-->
<!--			      :value="item.value">-->
<!--			    </el-option>-->
<!--			  </el-select>-->
<!--	  </el-form-item>-->
    <el-form-item label="公司地址" style="width: 600px;">
      <el-input v-model="formLabelAlign.address" ></el-input>
    </el-form-item>

	  <el-form-item label="详细地址" style="width: 600px;">
	    <el-input v-model="formLabelAlign.detailAddress" ></el-input>
	  </el-form-item>
	  
	  <el-form-item label="手机号码" style="width: 600px;">
	    <el-input v-model="formLabelAlign.phone" ></el-input>
	  </el-form-item>
	  
	  <el-form-item label="营业执照" style="width: 600px;">
	    <el-upload
	      class="avatar-uploader"
	      action="https://jsonplaceholder.typicode.com/posts/"
	      :show-file-list="false"
	      :on-success="handleAvatarSuccess"
	      :before-upload="beforeAvatarUpload">
	      <img v-if="imageUrl" :src="imageUrl"v-model="formLabelAlign.licenseLink"  class="avatar">
	      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
	    </el-upload>
	  </el-form-item>
	  
	  <el-form-item>
	      <el-button type="primary" @click="updSupplierlist">保存</el-button>
	      <el-button>取消</el-button>
	    </el-form-item>
	</el-form>
	</div>
</template>

<script>
  export default {
     data() {
          return {
            sysUsersId:'',
            labelPosition: 'right',
            //表单对象
            formLabelAlign: [{}],
					 imageUrl: ''
          };
        },
        methods: {
            onSubmit() {
              console.log('submit!');
            },
		        handleAvatarSuccess(res, file) {
		          this.imageUrl = URL.createObjectURL(file.raw);
		        },
		        beforeAvatarUpload(file) {
		          const isJPG = file.type === 'image/jpeg';
		          const isLt2M = file.size / 1024 / 1024 < 2;
		  
		          if (!isJPG) {
		            this.$message.error('上传头像图片只能是 JPG 格式!');
		          }
		          if (!isLt2M) {
		            this.$message.error('上传头像图片大小不能超过 2MB!');
		          }
		          return isJPG && isLt2M;
		        },
          //查询数据
          async viewsupplier(){
            //拿用户id
            this.sysUsersId=this.$store.state.user.sysUsersId
            console.log(this.sysUsersId)
            //根据用户id查询数据
            const {data: res} = await this.$http.post(`/supplierInfo/SupplierDataPage/${this.sysUsersId}`)
            this.formLabelAlign = res
            console.log(res)
            console.log(this.formLabelAlign)
          },
          //保存修改按钮
          async updSupplierlist(){
            const {data: res} = await this.$http.post(`/supplierInfo/supplierUpdate/`,this.formLabelAlign)
            //消息提示
            this.$message({
              showClose: true,
              message: '信息修改成功',
              type: 'success'
            });
          }
		      
        },
    created() {
       this.viewsupplier()
    },
  };
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  /*#SupplierData{*/
	/*  position: relative;*/
	/*  left: 130px;*/
  /*}*/
</style>